<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">资金明细</view>
		</view>
		<view class="clear_box"></view>
		<view class="head">
			<view class="tabber">
				<view class="tab" :class="type == 'all'?'tab_s':''" @click="typeChange('all')">全部</view>
				<view class="tab" :class="type == '0'?'tab_s':''" @click="typeChange('0')">消费</view>
				<view class="tab" :class="type == '1'?'tab_s':''" @click="typeChange('1')">提现</view>
				<view class="tab" :class="type == '2'?'tab_s':''" @click="typeChange('2')">收益</view>
				<view class="tab" :class="type == '3'?'tab_s':''" @click="typeChange('3')">抵用</view>
			</view>
		</view>
		<view class="list">
			<block v-for="(item,index) in list" :key="'r_'+index">
				<view class="row">
					<view class="iconfont icon i0" v-if="item.type == '0' ">&#xe60b;</view>
					<view class="iconfont icon i1" v-if="item.type == '1' ">&#xe650;</view>
					<view class="iconfont icon i2" v-if="item.type == '2' ">&#xe650;</view>
					<view class="iconfont icon i3" v-if="item.type == '3' ">&#xe681;</view>
					<view class="msg">
						<view class="m1">{{item.title}}</view>
						<view class="m2">{{item.time}}</view>
					</view>
					<view class="price" :class="item.type == '2'?'price_red':''">
						{{item.price}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'all',
				list:[
					{type:'1',title:'提现到微信',time:'2022-11-23 17:29',price:'-380'},
					{type:'0',title:'消费支出',time:'2022-11-23 17:29',price:'-380'},
					{type:'2',title:'团队收益',time:'2022-11-23 17:29',price:'+180'},
					{type:'3',title:'使用抵用券',time:'2022-11-23 17:29',price:'-50'},
					{type:'1',title:'提现到微信',time:'2022-11-23 17:29',price:'-380'},
					{type:'0',title:'消费支出',time:'2022-11-23 17:29',price:'-380'},
					{type:'2',title:'团队收益',time:'2022-11-23 17:29',price:'+180'},
					{type:'3',title:'使用抵用券',time:'2022-11-23 17:29',price:'-50'}
				]
			};
		},
		methods:{
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			typeChange(_type){
				if(this.type != _type){
					this.type = _type;
				}
			}
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
	padding-bottom: 21vw !important;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.head{
	position: fixed;
	z-index: 98;
	width: 100%;
	background: #F6F8FA;
	padding: 3vw 4% 1vw;
	.tabber{
		height: 12vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 1vw;
		.tab{
			min-width: 15%;
			height: 11vw;
			line-height: 11vw;
			text-align: center;
			font-size: 3.5vw;
			color: #69717A;
		}
		.tab_s{
			position: relative;
			font-weight: bold;
			font-size: 4vw;
			color: #0DA4AD;
			&::after{
				content: '';
				position: absolute;
				bottom: 1vw;
				height: 1vw;
				width: 30%;
				left: 35%;
				background: #0DA4AD;
				border-radius: 1vw;
			}
		}
	}
}
.list{
	padding: 16vw 4% 0;
	.row{
		padding: 3vw;
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 25rpx;
		.icon{
			width: 9vw;
			height: 9vw;
			border-radius: 50%;
			font-size: 6vw;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			padding-right: 0.2%;
		}
		.msg{
			flex: 1;
			padding: 0 25rpx;
			.m1{
				color: #2B394E;
				font-weight: bold;
				font-size: 4vw;
			}
			.m2{
				font-size: 3vw;
				color: #8493AA;
				padding-top: 8rpx;
			}
		}
		.price{
			font-size: 4vw;
			font-weight: bold;
			color: #2B394E;
		}
		.price_red{
			color: #FA4A4A;
		}
		.i0{background: #0DA4AD;}
		.i1{background: #28C445;}
		.i2{background: #FA4A4A;}
		.i3{background: #0DA4AD;}
	}
}
</style>
